<template>
  <div>
    <el-container>
      <el-header style="height: 80px; background-color: #333;">

        <el-menu mode="horizontal" style="height: 50px;float: center; background-color: #333; margin:20px; border-bottom:0px;">
          <el-form class="menutitlestyle" size="normal" style="float: left; color:#fff;">

            <el-col :span="40">
              <el-form-item>
                <h1> helloVue2 </h1>
              </el-form-item>
            </el-col>


          </el-form>


          <el-form size="normal" style="float: right;">


            <el-col :span="3">
              <el-form-item label-width="100px">
                <el-button @click="mylogout" style="float: right;" size="normal" type="primary">注销</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-menu>

      </el-header>
      <el-container>
        <el-aside width="200px" style="height: 850px;  background-color: #333">

          <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
            background-color="#111" text-color="#fff" active-text-color="#6ca0ff" style="height: 100%">

            <el-menu-item index="1" @click="menu1()">
              <i class="el-icon-menu"></i>
              <span slot="title"> 目录1</span>
            </el-menu-item>


            <el-menu-item index="2" @click="menu2()">
              <i class="el-icon-menu"></i>
              <span slot="title">目录2</span>
            </el-menu-item>


            <el-menu-item index="3" @click="menu3()">
              <i class="el-icon-menu"></i>
              <span slot="title"> 目录3</span>
            </el-menu-item>

            <el-menu-item index="4" @click="menu4()">
              <i class="el-icon-menu"></i>
              <span slot="title">目录4</span>
            </el-menu-item>

            <el-menu-item index="5" @click="menu5()">
              <i class="el-icon-menu"></i>
              <span slot="title">目录5</span>
            </el-menu-item>

            <el-menu-item index="6" @click="menu6()">
              <i class="el-icon-menu"></i>
              <span slot="title">目录6</span>
            </el-menu-item>

          </el-menu>

        </el-aside>
        <el-main>
          <div  v-if="menuvalue=='menu_task_manage'">
            <div style="margin-top:300px;">
              <h2>1页面开发中,敬请期待....</h2>
            </div>
          </div>
          <div class="divsys"  v-else-if="menuvalue=='menu_tasks_manage'">
            <div style="margin-top:300px;">
              <h2>2页面开发中,敬请期待....</h2>
            </div>
          </div>
          <div   v-else-if="menuvalue=='menu_report'">
            <!--      <reportList></reportList> -->
            <div style="margin-top:300px;">
              <h2>3页面开发中,敬请期待....</h2>
            </div>
          </div>

          <div  v-else-if="menuvalue=='menu_vm'">
            <div style="margin-top:300px;">
              <h2>4页面开发中,敬请期待....</h2>
            </div>
          </div>

          <div  v-else-if="menuvalue=='menu_exec'">
            <div style="margin-top:300px;">
              <h2>5页面开发中,敬请期待....</h2>
            </div>
          </div>

          <div class="divsys" v-else-if="menuvalue=='menu_sys'">

               <h2>6页面开发中,敬请期待....</h2>

          </div>
          <div v-else>
            <div style="margin-top:300px;">
              <h2>页面开发中,敬请期待....</h2>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>



<script>
  import {
    postTestAddApi
  } from '../request/api.js';
  export default {
    data() {
      return {
        menuvalue:"menu_task_manage",
        currentPage1: 1,
      };
    },
    components: {

    },
    mounted: function() {},

    watch: {},
    methods: {
      menu1() {
        console.log("点击了第一个")
        this.menuvalue = "menu_task_manage";
      },
      menu2() {
        this.menuvalue = "menu_tasks_manage";

      },
      menu3() {

        this.menuvalue = "menu_report";
      },
      menu4() {
        this.menuvalue = "menu_vm";
      },
      menu5() {
        this.menuvalue = "menu_exec";

      },
      menu6() {
        var that = this;
        that.menuvalue = "menu_sys";
      },
      mylogout(){

      	this.$router.push('/login');

      },

      demo1(index, row) {
        var that = this
        var mydata = {
          "id": row.id
        }
        postperformancedellogbytaskid(mydata)
          .then(function(response) {
            that.$message.success(response.msg);
            that.getTaskDetailsList(that.detailLogId);
          })
          .catch(function(error) {
            console.log(error);
          });

      },
    },
  }
</script>


<style>
  .el-table {}

  .table_header_class {

    line-height: 60px;

  }

  .menutitlestyle .el-form-item__content {
    line-height: 0px;


  }

  .selectproject .el-form-item__label {
    color: #fff;
  }

  .el-header {

    color: #333;
    text-align: center;
    height: 100px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    /*    line-height: 200px; */
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    /*   line-height: 160px; */
  }

  .divsys {

    display: flex;
    justify-content: center;
    align-items: center;
    width: 900px;


  }
</style>
